<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/lib/Hui-iconfont/1.0.8/iconfont.css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" th:href="@{/h-ui.admin/skin/default/skin.css}"/>
    <link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">

    <!--/meta 作为公共模版分离出去-->

    <link href="lib/webuploader/0.1.5/webuploader.css" th:href="@{lib/webuploader/0.1.5/webuploader.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
    <form method="post" class="form form-horizontal" id="form-article-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>课程标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="在这里输入你的课程名称" id="coursename" name="">
            </div>
        </div>
        <div class="row cl" th:unless="${session.addcourseUserId==0}">
            <label class="form-label col-xs-4 col-sm-2">用户ID：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="sytest" th:value="${session.User.userId}" placeholder="" id="userId" name="userId">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">发布者：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input th:if="${session.addcourseUserId==0}" type="text" class="input-text author" value="sytest" th:value="${session.admin.adminName}" placeholder="" name="author">
                <input th:unless="${session.addcourseUserId==0}" type="text" class="input-text author" value="sytest" th:value="${session.User.userName}" placeholder="" name="author">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">发布者身份：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input th:if="${session.addcourseUserId==0}" type="text" class="input-text role" value="管理员" placeholder="" name="">
                <input th:unless="${session.addcourseUserId==0}" type="text" class="input-text role" value="教师" placeholder="" name="">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>课程简介：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="" cols="" rows="" id="courseDetails" class="textarea"  placeholder="说点什么...最少输入10个字符,但是尽量不要超过250个字哦" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"></textarea>

            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>封面上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <button href="javascript:void(0);" onclick="openFile();" type="button" class="ui button teal mini">+上传图片</button>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">上传预览：</label>
            <div class="formControls col-xs-8 col-sm-9" id="yulan">
                    <img src="../../static/imges/01.jpg" class="image-size-course">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">上传的图片路径：</label>
            <div class="formControls col-xs-8 col-sm-9" id="imageurl">
                <p>当前未上传图片</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>开始上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <button class="ui button teal mini" type="button" disabled="disabled" id="upimages">开始上传</button>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="course_save_submit();" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
                <button onClick="layer_close();" class="btn btn-default radius" id="usergg" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
    <form id="uploadForm" name="uploadForm">
        <input hidden type="file" name="imageData" id="imageData" class="imageData" onchange="showImg(this)">
    </form>
</div>

<!--_footer 作为公共模版分离出去-->
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" src="../../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../static/lib/My97DatePicker/4.8/WdatePicker.js" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/jquery.validate.js" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/validate-methods.js" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/messages_zh.js" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" src="../../static/lib/webuploader/0.1.5/webuploader.min.js" th:src="@{/lib/webuploader/0.1.5/webuploader.min.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.config.js" th:src="@{/lib/ueditor/1.4.3/ueditor.config.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.all.min.js" th:src="@{/lib/ueditor/1.4.3/ueditor.all.min.js}"> </script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js" th:src="@{/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript">
    function openFile() {
        $("#imageData").trigger("click");
    }
    var urlstr = '';
    //图片预览
    function showImg(obj){
        var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.GIF$)|(\.*.BMP$)/;
        if(!patter.test($(obj).val())){
            alert('系统不支持图片的格式');
        }else {
            var file = obj.files[0];
            var l = window.URL.createObjectURL(file)
            $("#upimages").removeAttr("disabled");
            $('#yulan').html("<img class='image-size-course' src='"+l+"'>");
        }
    }
    //图片上传到oss
    $("#upimages").click(function () {
        var formdata = new FormData(document.getElementById("uploadForm"));
        $.ajax({
            type:'POST',
            url:'/sy/syadmin/uploadFile',
            data: formdata,
            processData:false,
            contentType:false,
            async: false,
            cache: true,
            success:function(data){
                if(data==="null"){
                    alert("没有获取到上传文件")
                }
                else {
                    urlstr=data;
                    $("#imageurl").html('<p id="imgurl">'+data+'</p>')
                }

            },
            error:function(){
                alert("出错了")
            }

        })
    })

//    表单提交
    function course_save_submit() {
        const  coursename= $("#coursename").val();
        const  author= $(".author").val();
        const  userId = $("#userId").val();
        var role= 0;
        if(userId !=null){
            role=userId;
        }
        const  courseDetails= $("#courseDetails").val();
        const  imgurl= urlstr;
        if(coursename.length==0 || author.length==0 || courseDetails.length==0){
            alert("不能留空哦！")
            return;
        }
        if(imgurl===''){
            alert("课程封面还没有上传")
            return;
        }
        if(courseDetails.length<10){
            alert("课程简介最少输入10个字符")
            return;
        }
        data = {
            courseName: coursename,
            courseAuthor: author,
            courseAuid: role,
            courseDetails: courseDetails,
            courseImge: imgurl
        };
        $.ajax({
            type: 'post',
            cache: false,
            url: '/sy/course/savecourse',
            data: JSON.stringify(data),
            contentType: 'application/json;charset:utf-8',
            success: function(data){
                if(role!=0){
                    alert("发布成功")
                    $("#usergg").trigger("click");
                }else {
                    window.location.replace("/sy/course/courseview")
                }
            },
            error: function (message) {
                alert("出错了")
            }
        })
    }

</script>
</body>
</html>